<template>
    <div class="container">
        <p>温度{{ temp }}</p>
        <p class="yujing" v-show="tempStatus">温度预警</p>
        <p>水位{{ height }}</p>
        <p class="yujing" v-show="heightStatus">水位预警</p>
        <button @click="addTemp">增加温度</button>
        <button @click="subTemp">降低温度</button>
        <button @click="addHeight">增加水位</button>
        <button @click="subHeight">降低水位</button>
    </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const temp = ref(10)
const height = ref(10)

const tempStatus = ref(false)
const heightStatus = ref(false)

function addTemp() {
    temp.value += 10
}
function addHeight() {
    height.value += 10
}
function subTemp() {
    temp.value -= 10
}
function subHeight() {
    height.value -= 10
}
// watch(() => temp, (newValue, oldValue) => {
//     console.log('温度变化了', newValue, oldValue)
// })

watchEffect(() => {
    if (temp.value >= 60) {
        tempStatus.value = true
    } else {
        tempStatus.value = false
    }
    if (height.value >= 50) {
        heightStatus.value = true
    } else {
        heightStatus.value = false
    }
})

</script>

<style scoped>
.container {
    background-color: #1ad6c6;
    box-shadow: 5 5 10 #e9e9e9;
}

button {
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    height: 100px;
    width: 100px;
}

.yujing {
    color: red;
    font-weight: 900;
    font-size: 20px;
}
</style>